<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right"
                 label-width="100px">
          <el-form-item label="仓库：">
            <el-input v-model="searchFilters.name" placeholder="请输入仓库编码或仓库名称"></el-input>
          </el-form-item>
          <el-form-item label="商品：">
            <el-input v-model="searchFilters.name" placeholder="请输入商品编码或商品名称"></el-input>
          </el-form-item>
          <el-form-item label="总库存：" style="width: 400px">
            <el-col :span="10">
              <el-input v-model="searchFilters.name"></el-input>
            </el-col>
            <el-col :span="4">
              -
            </el-col>
            <el-col :span="10">
              <el-input v-model="searchFilters.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="可售库存：" style="width: 400px">
            <el-col :span="10">
              <el-input v-model="searchFilters.name"></el-input>
            </el-col>
            <el-col :span="4">
              -
            </el-col>
            <el-col :span="10">
              <el-input v-model="searchFilters.name"></el-input>
            </el-col>
          </el-form-item>
          <div>
            <el-form-item label="商家">
              <el-select v-model="searchFilters.productId" placeholder="请选择商家">
                <el-option
                  v-for="item in selectedOptionsData1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- 搜索区域按钮-查询,重置 -->
          <div class="tool-wrap">
            <div class="left-area">
              <el-button-group>
                <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                <el-button type="primary" size="small" @click="ExcelDownLoad()">导出</el-button>
              </el-button-group>
            </div>
          </div>
          <!-- 表格数据部分 -->
          <div class="table-wrap">
            <jic-table
              :height="350"
              :operationWidth=200
              :tableList="tableList"
              :showDeleteOperation="true"
              :tableHeaderList="tableHeaderList"
              :totalSize="totalSize"
              :showDetailOperation=true
              :showBatchDelete=false
              :showSelection=true
              :showIndex=false
              @findPage="findPage"
              @handleDelete="handleDelete"
              @handleDetail="handleDetail"
              @handleSizeChange="handleSizeChange"
              @handlePageChange="handlePageChange"
              @selectionChange="selectionChange"
              ref="jicTable"
            ></jic-table>
          </div>
        </el-form>
        <!--新增编辑界面-->
        <el-dialog
          :title="operation?'新增':'编辑'"
          width="40%"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false">
          <el-form
            :model="dataForm"
            label-width="100px"
            :rules="dataFormRules"
            ref="dataForm">
            <el-form-item label="仓库编码" prop="code">
              <el-input v-model="dataForm.code" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="仓库名称" prop="name">
              <el-input v-model="dataForm.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="仓库归属" prop="type">
              <el-select v-model="dataForm.type" placeholder="请选择仓库归属">
                <el-option label="自有" value="0"></el-option>
                <el-option label="三方" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="仓库状态" prop="status">
              <el-select v-model="dataForm.status" placeholder="请选择仓库归属">
                <el-option label="启用" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商家" prop="productId">
              <el-select v-model="dataForm.productId" placeholder="请选择商家">
                <el-option
                  v-for="item in selectedOptionsData1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="仓库地址" prop="addressDetail">
              <el-input v-model="dataForm.addressDetail" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="仓库负责人" prop="ownerId">
              <el-input v-model="dataForm.ownerId" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="负责人电话" prop="ownerMobile">
              <el-input v-model="dataForm.ownerMobile" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
            <el-button
              :size="size"
              type="primary"
              @click.native="submitForm"
            >{{$t('action.submit')}}
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  //一.导包区
  import jicTable from '@/components/jicComponentGallery/jicTable';

  //二.数据输出区
  export default {

//2.1 注册组件
    components: {
      jicTable,
    },

//2.2 数据初始化区
    data() {
      return {
        selections: [],//多选框选中项
        selectedOptionsData1: [
          {
            value: '1',
            label: '商家1'
          },
          {
            value: '2',
            label: '商家2'
          }
        ],//商家列表数据

        size: "small",
        dataForm: {'deleteFlag': 0},//表单内容数据
        dataFormRules: {
          name: [{required: true, message: "请输入模板名称", trigger: "blur"}],
          type: [{required: true, message: "请选择仓库归属", trigger: "change"}],
          status: [{required: true, message: "请选择仓库状态", trigger: "change"}],
          productId: [{required: true, message: "请选择商家", trigger: "change"}],
          addressDetail: [{required: true, message: "请输入详细地址", trigger: "blur"}],
          ownerId: [{required: true, message: "请选择仓库负责人", trigger: "change"}],
          ownerMobile: [{required: true, message: "请输入负责人电话", trigger: "blur"}],
        },//表单校验规则
        //2.2.1 公共数据初始化
        pageIndex: 0,
        pageSize: 10,
        totalSize: 0,//// 返回数据总条数
        pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
        tableList: [
          {}
        ],                               // 表格列表数据
        searchSize: 'mini',

// 2.2.2 表格表头数据
        tableHeaderList: [
          {prop: "name", label: "仓库名称", minWidth: 100, formatter: null},
          {prop: "code", label: "仓库编码", minWidth: 100, formatter: null},
          {prop: "productId", label: "商家", minWidth: 100, formatter: null},
          {prop: "productId", label: "商品编码", minWidth: 100, formatter: null},
          {prop: "productId", label: "商品名称", minWidth: 100, formatter: null},
          {prop: "productId", label: "主计量单位", minWidth: 100, formatter: null},
          {prop: "productId", label: "实际库存", minWidth: 100, formatter: null},
          {prop: "type", label: "冻结库存", minWidth: 100, formatter: this.fomatterype},
          {prop: "status", label: "剩余库存", minWidth: 100, formatter: this.formatterStatus},
          {prop: "addressDetail", label: "最后更新时间", minWidth: 100, formatter: null},
        ],// 2.2.3 搜索表单对应的数据对象初始化
        searchFilters: {
          name: null,
          code: null,
          type: null,
          status: null,
          productId: null,
          delete_flag: '0',
        },
        operation: false, // true:新增, false:编辑
        dialogVisible: false, //// 是否显示弹窗内容;
//editDialogVisible1: false,//// 是否可编辑弹窗内容;
//editLoading: false,////是否显示加载时动画效果;
      }//return 完结;
    },//data()方法 完结;

    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
      this.findPage();
      let this_ = this;
      this.utils.request.queryMerchantListOther({}, function (res) {
        if (res.code == "0000") {
          this_.selectedOptionsData1 = res.data;
        }
      });
    },
    //2.3 JavaScript 方法区
    methods: {
      //2.3.1 JavaScript 公共方法区


      //2.请求列表数据
      findPage(pageNum) {
        // 传过滤器的参数
        let this_ = this;
        if (this_.searchFilters === undefined || this_.searchFilters === null) {
          this_.searchFilters = {'delete_flag': '0'};
        }
        this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
        this_.searchFilters.pageSize = this.pageRequest.pageSize;
        this.utils.request.findMStorePage(this_.searchFilters, function (res) {
          if (res.code === "0000") {
            this_.tableList = res.data.rows;
            this_.totalSize = Number(res.data.total);
          } else {
            this_.tableList = [];
            this_.totalSize = 0;
          }
        });
      },

// 3.重置搜索框条件
      resetForm(formName) {
        this.searchFilters = {};
        this.findPage(null);
      },

// 4.详情按钮对应的方法(TODO 需要修改路径)
      handleDetail(params) {
        this.$router.push({path: "/pages/Store/MStoreDetail/" + params.row.id});
      },

// 5.请求条数发生变化
      handleSizeChange(params) {
        this.pageRequest.pageSize = params.size;
        this.findPage()
      },

// 6.请求页数发生变化
      handlePageChange(params) {
        this.pageRequest.pageNum = params.number;
        this.findPage();
      },
// 7.页面弹窗处理方法
      add() {
        this.dialogVisible = true;
      },

// 8.关闭弹窗
      handleClose() {
        this.dialogVisible = false;
      },

//==========2.3.1 JavaScript 自定义方法区==========
      //excel导出
      ExcelDownLoad() {
        alert('导出excel')
      },
      //提交表单
      submitForm: function () {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.editLoading = true;
              let params = Object.assign({}, this.dataForm);
              this.utils.request.saveOrUpdateMStore(params, this.editInfoBack);
              this.dialogVisible = false;
            });
          }
        });

      },
      editInfoBack() {
        this.findPage()
      },
      handleDelete(data) {
        this.$confirm("确认删除吗？", "提示", {}).then(() => {
          var params = data.row;
          var this_ = this;
          this.utils.request.deleteMStoreByPrimaryKey(params, function (res) {
            if (res.code == "0000") {
              this_.$message({message: "操作成功", type: "success"});
              this_.findPage(null);
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
            }
          });
        });
      },
      //批量启用
      Enables() {
        let that = this;
        if (that.selections.length == 0) {
          this.$message({
            showClose: true,
            message: '必须选中一条数据!',
            type: 'warning'
          });
          return
        }
        let flag = false;

        for (let i = 0; i < this.selections.length; i++) {
          if (this.selections[i].status == '1') {
            flag = true;
          }
        }
        if (flag) {
          this.$message({
            showClose: true,
            message: '选中仓库必须为未启用状态!',
            type: 'warning'
          });
          return
        }
        let ids = [];
        for (let i = 0; i < this.selections.length; i++) {
          ids.push(this.selections[i].id)
        }
        //调用方法、
        this.utils.request.updateStoreStatus({ids:ids,status:"1"}, function (res) {
          if (res.code == "0000") {
            that.$message({message: "操作成功", type: "success"});
            that.findPage(null);
          } else {
            that.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });


      },
      //批量停用
      unEnables() {
        let that = this;
        if (that.selections.length == 0) {
          this.$message({
            showClose: true,
            message: '必须选中一条数据!',
            type: 'warning'
          });
          return
        }
        let flag = false;

        for (let i = 0; i < this.selections.length; i++) {
          if (this.selections[i].status == '0') {
            flag = true;
          }
        }
        if (flag) {
          this.$message({
            showClose: true,
            message: '选中仓库必须为已启用状态!',
            type: 'warning'
          });
          return
        }
        let ids = [];
        for (let i = 0; i < this.selections.length; i++) {
          ids.push(this.selections[i].id)
        }
        //调用方法、
        this.utils.request.updateStoreStatus({ids:ids,status:"0"}, function (res) {
          if (res.code == "0000") {
            that.$message({message: "操作成功", type: "success"});
            that.findPage(null);
          } else {
            that.$message({
              message: "操作失败, " + res.msg,
              type: "error"
            });
          }
        });
      }
      ,
      // 选中列表中的选项触发
      selectionChange(selections) {
        this.selections = selections.selections;
      },
      formatterStatus(row){
        if(row.status=='0'){
          return '停用'
        }else {
          return"启用"
        }
      },
      fomatterype(row){
        if(row.type=='0'){
          return '自有'
        }else {
          return"三方"
        }
      },


    },
  }
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
